<template>
  <div class="mine">
    <div class="title">
      <div class="img">
        <div class="img_bg">
          <img v-if="!token" src="https://m.mi.com/static/img/avatar.76a75b8f17.png" alt="" />
          <img v-if="token" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww2.flightclub.cn%2Fimgshow%2Fnews__uploads__allimg__200630__14-200630104925.png%2F640%2F100.jpg&refer=http%3A%2F%2Fwww2.flightclub.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641905929&t=509a262eb07291c622ebf0c8772442ad" alt="">
        </div>
        <p class="name" @click="onlogin"><span v-if="!token">登录/注册</span><span v-if="token">蝎子莱莱</span></p>
      </div>
    </div>
    <div class="topBox">
      <div class="wd">我的订单</div>
      <div class="qd">全部订单</div>
    </div>
    <ul class="gwc">
      <li v-for="(item, index) in arrs" :key="index" class="ul_img">
        <img :src="item.imgsrc" alt="" />
        <p>{{ item.pirse }}</p>
      </li>
    </ul>
    <div class="ul-line"></div>
    <ul class="hui">
      <li v-for="(item, index) in arrn" :key="index" class="jin">
        <div class="bg_img">
          <img :src="item.imgsrc" alt="" />
        </div>
        <div class="p">
          <a href="#">{{ item.pirse }}</a>
        </div>
      </li>
    </ul>
    <div class="ul-line"></div>
    <ul class="hui">
      <li v-for="(item, index) in arrq" :key="index" class="jin">
        <div class="bg_img">
          <img :src="item.imgsrc" alt="" />
        </div>
        <div class="p">
          <a href="#">{{ item.pirse }}</a>
        </div>
      </li>
    </ul>
    <div class="ul-line"></div>
    <ul class="hui">
      <li v-for="(item, index) in arrw" :key="index" class="jin">
        <div class="bg_img">
          <img :src="item.imgsrc" alt="" />
        </div>
        <div class="p">
          <a href="#">{{ item.pirse }}</a>
        </div>
      </li>
    </ul>
    <div class="ul-line"></div>
    <ul class="hui">
      <li v-for="(item, index) in arre" :key="index">
        <div class="bg_img">
          <img :src="item.imgsrc" alt="" />
        </div>
        <div class="p">
          <a href="#">{{ item.pirse }}</a>
        </div>
      </li>
    </ul>
    <div class="ul-line"></div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import instance from "../../api/request";
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "Mine",
  data() {
    return {
      arrs: [],
      arrn: [],
      arrq: [],
      arrw: [],
      arre: [],
      token: false,
    };
  },
  methods: {
    async fn() {
      let { data } = await instance.get("/index.json");
      this.arrs = data.mine[0].gwc;
    },
    async f1() {
      let { data } = await instance.get("/index.json");
      this.arrn = data.mine[1].hui[0].shang;
    },
    async f2() {
      let { data } = await instance.get("/index.json");
      this.arrq = data.mine[1].hui[0].zhong;
    },
    async f3() {
      let { data } = await instance.get("/index.json");
      this.arrw = data.mine[1].hui[0].xia;
    },
    async f4() {
      let { data } = await instance.get("/index.json");
      this.arre = data.mine[1].hui[0].dibu;
    },
    onlogin() {
      this.$router.push({ path: "/login" });
    },
    getToken() {
      this.token = localStorage.getItem("Token");
      console.log(this.token);
    },
  },
  created() {
    this.fn();
    this.f1();
    this.f2();
    this.f3();
    this.f4();
    this.getToken();
  },
  components: { Tabbar },
};
</script>
<style lang="less" scoped>
.mine {
  width: 7.2rem;
  margin: 0 auto;
  .title {
    width: 7.2rem;
    background: url(https://m.mi.com/static/img/bg.63c8e19851.png) center 0
      #f37d0f;
    background-size: auto 100%;
    padding: 0.32rem 0;
    .img {
      display: flex;
      align-items: center;
      .img_bg {
        margin: 0 0.16rem 0 0.32rem;
        width: 0.96rem;
        height: 0.96rem;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 100%;
        border: 3px solid hsla(0, 0%, 100%, 0.4);
        text-align: center;
        img {
          width: 0.9rem;
          height: 0.9rem;
        }
      }
    }
    p {
      color: #fff;
      font-size: 0.24rem;
      text-align: left;
    }
  }
  .topBox {
    // width: 7.2rem;
    height: 0.79rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.28rem;
    color: rgba(0, 0, 0, 0.87);
    padding: 0 0.56rem 0 0;
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    .wd {
      padding: 0 0 0 0.32rem;
    }
    .qd {
      font-size: 0.24rem;
      position: relative;
    }
  }
  .topBox:after {
    content: "";
    position: absolute;
    right: 0.32rem;
    top: 50%;
    width: 0.2rem;
    height: 0.2rem;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translate3d(0, -50%, 0) rotate(135deg);
    -webkit-transform: translate3d(0, -50%, 0) rotate(135deg);
  }
  .ul-line {
    height: 0.2rem;
    background: #f5f5f5;
  }
  .gwc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8rem;
    .ul_img {
      padding: 0.4rem 0;
      img {
        width: 0.48rem;
        height: 0.48rem;
        margin: 0 0.09rem 0.16rem;
      }
      p {
        font-size: 0.22rem;
        color: rgba(0, 0, 0, 0.87);
      }
    }
  }
  .hui {
    .jin:eq(1) .p {
      border-bottom: 1px solid #ccc;
    }
    li {
      position: relative;
      height: 1.05rem;
      display: flex;
      align-items: center;
    }
    .bg_img {
      width: 1.14rem;
      height: 1.04rem;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.48rem;
      }
    }
    .p {
      a {
        display: inline-block;
        width: 6.12rem;
        height: 1.04rem;
        line-height: 1.04rem;
        font-size: 0.28rem;
      }
    }
    .jin:after {
      content: "";
      position: absolute;
      right: 0.32rem;
      top: 50%;
      width: 0.2rem;
      height: 0.2rem;
      border-left: 1px solid currentColor;
      border-top: 1px solid currentColor;
      transform: translate3d(0, -50%, 0) rotate(135deg);
      -webkit-transform: translate3d(0, -50%, 0) rotate(135deg);
    }
  }
}
</style>